<template>
  <div class="refund">
    <h3 class="cll_h3">退款管理</h3>
    <hr>
    <!-- 筛选 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item size="small">
        <el-select v-model="formInline.region" placeholder="男士餐">
          <el-option label="男士餐" value="男士餐" />
          <el-option label="女士餐" value="女士餐" />
          <el-option label="工作餐" value="工作餐" />
        </el-select>
      </el-form-item>
      <el-form-item size="small">
        <el-date-picker v-model="formInline.toTime" type="datetime" placeholder="起始时间" />
        <span class="zhi">至</span>
        <el-date-picker v-model="formInline.fromTime" type="datetime" placeholder="截止时间" />
      </el-form-item>
      <el-form-item size="small">
        <el-input v-model="formInline.user" placeholder="单号/姓名/电话" />
      </el-form-item>
      <el-form-item size="small">
        <button class="button" @click.prevent="hangdlesearch">筛选</button>
      </el-form-item>
      <el-form-item class="form_right" size="small">
        <button class="button"   @click.prevent="exportFile">导出</button>
      </el-form-item>
    </el-form>
    <hr>
    <!-- 退款订单表格 -->
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleselecchange">
      <el-table-column type="selection" width="70" align="center" header-align="center"
        label-class-name="DisabledSelection"  />
      <el-table-column label="订单号" width="120" align="center">
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column property="cuisine" label="配送产品" width="120" align="center" />
      <el-table-column property="refund" label="退款金额" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="location" label="收货地址" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="payment" label="付款状态" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="order" label="订单状态" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="name" label="收货人" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="phone" label="收货人手机" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="orderTime" label="下单时间" align="center" show-overflow-tooltip width="120" />
      <el-table-column label="操作" width="120" align="center" fixed="right">
        <template #default="scope">
          <u class="audit" @click="handleaudit(scope.row)">审核</u>
        </template>
      </el-table-column>
      <el-table-column label="退款状态" width="120" align="center" fixed="right">
        <template #default="scope">
          <u class="audit">{{scope.row.refundStatus}}</u>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagebox"><el-pagination 
      background 
      layout="prev, pager, next" 
      :total="total" 
      :default-page-size="pageSize"
      @current-change="pagechange"
      /></div>
  </div>
</template>

<script  lang="ts">
import { defineComponent, } from 'vue'
import { getrefundlist} from '../../api/refund'
import { ElMessage, ElMessageBox } from 'element-plus'
//xlsx 模块导入
// @ts-ignore
import { utils, writeFileXLSX } from 'xlsx'

export default defineComponent({
  name: 'refund',
  data() {
    return {
      formInline: {
        user: '',
        region: '',
        toTime: '',
        fromTime: '',
      },
      tableData: [
        {
          id: 454646,
          cuisine: '男士餐',
          refund: 300,
          location: '长安大街',
          payment: '已支付',
          order: '已完成',
          name: '李大宝',
          phone: 1234567893548,
          orderTime: new Date(),
          refundStatus: '审核不过',
        },
      ],
      exportlist:[],
      total:1,
      pageSize:5,
    }
  },
  methods: {
    // 分页切换
    pagechange(page:number){
      this.requestrefunddata(page)
    },
    // 筛选按钮
    hangdlesearch(){
      console.log(this.formInline)
    },
    // 多选框
    handleselecchange(selection:any){
      this.exportlist= selection
    },
    // 跳转审核页
    handleaudit(data:{}){
      this.$router.push({
        path:'/refund/redetails',
        query:data
      })
    },

    // 导出按钮
    exportFile(){
      ElMessageBox.confirm(
        '是否确认导出Exel表格',
        '下载确认',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'success',
        }
      )
        .then(() => {
          this.export()
          ElMessage({
            type: 'success',
            message: '导出成功',
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消导出',
          })
        })
    },
    // 导出函数
    export(){
      const list:any[] = this.exportlist
      list.unshift({
          number: '订单号',
          cuisine: '配送产品',
          refund: '退款金额',
          location: '收货地址',
          payment: '支付状态',
          order: '订单状态',
          name: '收货人',
          phone: '收货人手机',
          orderTime: '下单时间',
          refundStatus: '退款状态',
      })
      // 简历工作表  数组转工作表格式
      const ws = utils.json_to_sheet(list)
      // 创建工作簿
      const wb = utils.book_new()
      // 工作表插入工作簿
      utils.book_append_sheet(wb, ws, '近期营业状况')
      writeFileXLSX(wb, `近期营业状况-${new Date().toISOString()}.xlsx`)

    },
    // 请求数据函数
    async requestrefunddata(page=1){
      const res =  await getrefundlist(page)
    // @ts-ignore
    const {list,total,pageSize} = res
     this.tableData = list
     this.total = total
     this.pageSize = pageSize
    }
  },
  created(){
    this.requestrefunddata()
  },
})
</script>



<style scoped lang="less">
.zhi {
  padding: 0 10px;
}
.pagebox{
  display: flex;
  justify-content: center;
}
.headerform {
  display: flex;
  justify-content: space-between;

}

.form_right {
  float: right;
}
.audit {
    cursor: pointer;
  }
.el-form {
  padding-left: 20px;
}

// 多选框表头添加文字
.el-table /deep/.DisabledSelection .cell .el-checkbox__inner {
  margin-left: 0px;
  position: relative;
}

.el-table /deep/.DisabledSelection .cell:before {
  content: "全选";
  position: absolute;
  right: -1px;
}

.button {
  border: none;
  background-color: rgba(153, 153, 153, 1);
  color: #fff;
  width: 78px;
  height: 27px;
}

:deep(.el-input--small .el-input__wrapper) {
  border: 1px solid #000;

  &.is-focus {
    box-shadow: none;
  }
}

</style>


